<template>
  <view class="detail-view">
    <u-form label-width="150" :model="add_form" ref="uForm">
      <view class="form-model-view">
        <u-form-item required label="供应商名称">
          <u-input v-model="add_form.title" placeholder="请输入供应商名称" />
        </u-form-item>
        <u-form-item required label="联系人">
          <u-input v-model="add_form.realName" placeholder="请输入联系人" />
        </u-form-item>
        <u-form-item required label="联系电话">
          <u-input v-model="add_form.mobile" placeholder="请输入手机号码" />
        </u-form-item>
        <u-form-item label="联系人职务">
          <u-input v-model="add_form.position" placeholder="请输入职务" />
        </u-form-item>
        <u-form-item
          label="状态"
          v-if="$accessCheck($Access.SupplierUpdateEnableStatus)"
        >
          <view class="form-value">
            <u-switch
              style="transform: translateY(14rpx)"
              v-model="switchStatus"
              :active-value="5"
              :inactive-value="4"
              size="40"
              @change="change"
            ></u-switch>
          </view>
        </u-form-item>
      </view>
      <view class="form-model-view">
        <u-form-item required label="所属区域">
          <u-input
            v-model="area"
            class="dis-input"
            @click="region_show = true"
            disabled
            placeholder="请选择"
          />
          <u-icon name="arrow-right" size="24" color="#6c6c6c"></u-icon>
        </u-form-item>
        <u-form-item label-position="top" label="详细地址">
          <u-input
            v-model="add_form.address"
            type="textarea"
            placeholder="请输入"
          />
        </u-form-item>
      </view>
      <view class="form-model-view">
        <u-form-item label="开户人">
          <u-input
            v-model="add_form.accountName"
            placeholder="请输入真实姓名"
          />
        </u-form-item>
        <u-form-item label="开户银行">
          <u-input v-model="add_form.bankName" placeholder="请输入开户银行" />
        </u-form-item>
        <u-form-item label="银行账号">
          <u-input v-model="add_form.bankCard" placeholder="请输入银行账号" />
        </u-form-item>
      </view>
      <view class="form-model-view">
        <u-form-item label="备注" label-position="top">
          <u-input
            v-model="add_form.remark"
            type="textarea"
            placeholder="请输入备注"
          />
        </u-form-item>
      </view>
    </u-form>
    <view class="detail-bottom">
      <view class="handel-btn" @click="addSupplier">提交</view>
    </view>
    <RegionSel
      v-model="region_show"
      @confirm="confirm"
      @cancel="region_show = false"
    />
  </view>
</template>

<script>
import RegionSel from "@/components/region/RegionSel.vue";
export default {
  components: {
    RegionSel,
  },
  data() {
    return {
      region_show: false,
      add_form: {
        title: "",
        provinceCode: "",
        cityCode: "",
        districtCode: "",
        address: "",
        realName: "",
        mobile: "",
        enableStatus: 5,
        sex: 0,
        phone: "",
        position: "",
        email: "",
        remark: "",
        accountName: "",
        bankName: "",
        bankCard: "",
      },
      area: "",
      customer_id: "",
      switchStatus: true,
    };
  },
  onLoad(options) {
    if (options.id) {
      this.customer_id = options.id;
      uni.setNavigationBarTitle({
        title: "编辑供应商",
      });
      this.getSupplierInfoById();
    }
  },
  methods: {
    addSupplier() {
      if (
        !this.add_form.title.trim() ||
        !this.add_form.realName.trim() ||
        !this.add_form.mobile.trim() ||
        !this.area.trim()
      ) {
        this.$u.toast("必填项不能为空");
        return;
      }
      if (this.customer_id) {
        this.$u.api
          .editSupplier(this.customer_id, this.add_form)
          .then((res) => {
            this.$u.toast("编辑成功");
            setTimeout(() => {
              uni.navigateBack();
            }, 500);
          });
      } else {
        this.$u.api.addSupplier(this.add_form).then((res) => {
          this.$u.toast("提交成功");
          setTimeout(() => {
            uni.navigateBack();
          }, 500);
        });
      }
    },
    confirm(val) {
      this.add_form.provinceCode = val[0].value;
      this.add_form.cityCode = val[1].value;
      this.add_form.districtCode = val[2].value;
      let name = "";
      val.forEach((item) => {
        name += item.label;
      });
      this.area = name;
    },
    getSupplierInfoById() {
      this.$u.api.getSupplierInfoById(this.customer_id).then((res) => {
        this.add_form = res.data;
        this.switchStatus = res.data.enableStatus === 5;
        this.area =
          res.data.area.provinceName +
          "-" +
          res.data.area.cityName +
          "-" +
          res.data.area.districtName;
      });
    },
    change(val) {
      this.add_form.enableStatus = val;
    },
  },
};
</script>

<style>
.handel-btn {
  background-color: #fb5904 !important;
  border-color: #fb5904 !important;
}
</style>
